<template>
  <div id="app">
      <el-container>
        <el-header>TodoList</el-header>
        <el-main>        
         <div class="wait">
           <div class="title">请输入待办事项：</div>
           <div class="input">
             <el-input
              placeholder="请输入内容"
              v-model="submitVal"
              clearable>
            </el-input>
           </div>
           <div class="btn">
             <el-button icon="el-icon-success" @click="addTodo" type="primary">提交</el-button>
           </div>
         </div>
         <div class="ondo">
           <div class="title">
             <div class="ondo-title">正在进行</div>
             <div class="ondo-icon">
               <el-badge :value="waitTodoList.length" class="itemOn">
               </el-badge>
             </div>
           </div>
           <div class="ondoList">
             <el-card v-for="(item,index) in waitTodoList" :key="index">
               <div class="ondo-item">
               <div class="item-check">
                  <el-tooltip class="item" effect="dark" content="提交到已完成" placement="top-start">
                    <el-button type="info" circle icon="el-icon-check" @click="addToFinished(index)"></el-button>  
                  </el-tooltip>
               </div>
               <div class="item-desc">
                 {{item}}
               </div>
               <div class="item-del">
                 <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                  <el-button @click="delItem(index,0)" class="el-icon-delete item-del-btn"></el-button>
                 </el-tooltip>
               </div>
             </div>
             </el-card>
             <el-card  class="noItem" v-show="!waitTodoList.length">
               暂无正在进行事项
             </el-card>
           </div>
         </div>
         <div class="ondo">
           <div class="title">
             <div class="ondo-title">已完成</div>
             <div class="ondo-icon">
               <el-badge :value="finishedList.length" class="itemDo">
               </el-badge>
             </div>
           </div>
           <div class="ondoList">
             <el-card v-for="(item,index) in finishedList" :key="index">
               <div class="ondo-item">
               <div class="item-check">
                 <el-tooltip class="item" effect="dark" content="移至正在进行" placement="top-start">
                  <el-button type="success" circle icon="el-icon-check" @click="addToUnFinished(index)"></el-button>
                 </el-tooltip>
               </div>
               <div class="item-desc">
                 {{item}}
               </div>
               <div class="item-del">
                 <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                  <el-button @click="delItem(index,1)" class="el-icon-delete item-del-btn"></el-button>
                 </el-tooltip>
               </div>
             </div>
             </el-card>
              <el-card class="noItem" v-show="!finishedList.length">
               暂无已完成事项
             </el-card>
           </div>
         </div>
        </el-main>
        <el-footer>By Fys / 2018.04</el-footer>
      </el-container>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      submitVal: '',
      waitTodoList: [],
      finishedList: []
    }
  },
  mounted() {
    this.waitTodoList = localStorage.unFinishList?JSON.parse(localStorage.unFinishList):[]
    this.finishedList = localStorage.finishList?JSON.parse(localStorage.finishList):[]
  },
  methods: {
    openWarning() {
      const h = this.$createElement;
      this.$notify({
        title: '提醒',
        message: h('i', { style: 'color: #F56C6C'}, '请输入待办事项内容！')
      })
    },
    addTodo() {
      if(this.submitVal === '') {
        this.openWarning()
        return
      }
      this.waitTodoList.push(this.submitVal)
      this.submitVal = ''
    },
    addToFinished(index) {
      console.log(this.waitTodoList)
      this.finishedList.push(this.waitTodoList[index])
      this.waitTodoList.splice(index,1)
      console.log(this.waitTodoList)
      this.toLocalStorage()
    },
    addToUnFinished(index) {
      this.waitTodoList.push(this.finishedList[index])
      this.finishedList.splice(index,1)
      this.toLocalStorage()
    },
    delItem(index,status) {
      if(status === 0) {
        this.waitTodoList.splice(index,1)
      }
      else {
        this.finishedList.splice(index,1)
      }
      this.toLocalStorage()
    },
    toLocalStorage() { //存储到本地
      localStorage.unFinishList = JSON.stringify(this.waitTodoList)
      localStorage.finishList =  JSON.stringify(this.finishedList)
    }
  }
}
</script>

<style lang="stylus">
  .el-container
   display: flex
   flex-direction: column
   position: absolute
   top: 0
   left: 0
   right: 0
   bottom: 0
   .el-header
    background-color: #909399
    color: #fff
    text-align: center
    line-height: 1.2rem
    font-size: .6rem 
   .el-main
    flex: 1
    .wait
     background: #fff
     display: flex
     height: 1.2rem
     line-height: 1.2rem 
     border-bottom: .02rem solid #ccc
     .title
      float: left
      font-size: .4rem
     .input
      flex: 1
      padding-right: .6rem
     .btn
      float: right
    .ondo
     margin-top: .4rem 
     .title
      height: 1rem
      line-height: 1rem
      display: flex
      .ondo-title
       flex: 1
      .ondo-icon
       width: 1rem
       text-align: center
       .el-badge
        .el-badge__content
         height: .4rem
         line-height: .4rem
         border-radius: .1rem
       .itemDo
        .el-badge__content
         background: #67C23A
       .itemOn
        .el-badge__content
         background: #909399
     .el-card
      background: #ffffff
      padding: .2rem 0
      margin-bottom: .2rem
      .el-card__body
       padding: 0 0 0 .2rem
       .ondo-item
        height: .8rem
        line-height: .8rem
        display: flex
        .item-check
         width: 1rem
         text-align: center
         .el-button
          padding:.04rem
        .item-desc
         flex: 1
        .item-del
         width: 2rem
         cursor: pointer
         text-align: center
         .item-del-btn
          border: none
     .noItem
      .el-card__body
       color: #ccc
   .el-footer
    color: #fff
    text-align: right
    line-height: 1.2rem
    font-weight: 700
    background-color: #909399
</style>
